{extend name="common/base"/}
{block name="style"}{/block}
{block name="meta"}
<link rel="mobile-prefetch" href="/mobile/index" />
{/block}
{block name="title"}
<title>{$seo.title}</title>
{/block}
{block name="keywords"}
<meta name="keywords" content="{$seo.keywords}" />
<meta name="description" content="{$seo.desc}" />
{/block}

<!-- 主体 -->
{block name="body"}
{include file="common/header" nav='index' /}
<div class="blog-map">
	您的当前位置：<a href="/">首页</a><span>&gt;</span>文章归档
</div>
<div class="blog-content clearfix">
	<div class="blog-calendar">
		<div id="archiveCalendar" style="width: 100%; height:240px"></div>
	</div>
	<div class="blog-archives">
		<div class="blog-analysis">
			博客统计：<span>{$cate_count}</span>个分类<span>{$tag_count}</span>个标签<span>{$article_count}</span>篇文章<span>{$read_count}</span>人次浏览<span>{$view_count}</span>人次访问
		</div>
		<div class="blog-archives-list">
			{volist name="$year_archives" id="vo"}
			<div class="blog-archives-year"><h3>{$key} 年</h3></div>
			{volist name="$vo" id="voo" key="kk"}
			<div class="blog-archives-month">
				<span class="mon">{$key}月 <span class="mon-num">{$voo.count} 篇</span></span>
			</div>
			<ul class="blog-archives-ul">
				{volist name="$voo.list" id="vooo"}
				<li>{$vooo.create_date}日 <a href="/home/article/detail/id/{$vooo.id}.html">{$vooo.title}</a> ({$vooo.read})</li>
				{/volist}
			</ul>
			{/volist}
			{/volist}
		</div>
	</div>
</div>
{/block}
<!-- /主体 -->

<!-- 脚本 -->
{block name="script"}
<script src="https://cdn.staticfile.org/echarts/5.3.0/echarts.min.js"></script>
<script>
	var archiveCalendar = {$date_archives | raw};
	function getRange(){
		let today = new Date();
		let tYear = today.getFullYear();  
		let tMonth = today.getMonth()+1;  
		let tDate = today.getDate();
		let dateFirst=tYear+"-"+tMonth+"-"+tDate;
		let datelast=(tYear-1)+"-"+tMonth+"-"+tDate;
		let dataRange=[];
		dataRange.push(dateFirst);
		dataRange.push(datelast);
		return dataRange;
	}

	function getDay(){  
	    var today = new Date();
		var dayArray=[];
		for(var i=0;i<366;i++){
			var targetday_milliseconds=today.getTime() - 1000*60*60*24*i;
			var date = new Date(targetday_milliseconds);
			dayArray.push(retunDay(date));
		}	    
		return dayArray;
	}

	function retunDay(day){  
		var tYear = day.getFullYear();  
		var tMonth = day.getMonth();  
		var tDate = day.getDate();  
		tMonth = tMonth + 1;  
		if(tMonth.toString().length == 1){  
			tMonth = "0" + tMonth;  
		}  
		if(tDate.toString().length == 1){  
			tDate = "0" + tDate;  
		}
		var dateStr=tYear+"-"+tMonth+"-"+tDate;
		var dateArray=[];
		dateArray.push(dateStr);
		if(archiveCalendar[dateStr]){
			dateArray.push(archiveCalendar[dateStr]);
		}
		else{
			dateArray.push(0);
		}
		return dateArray;  
	}

	let myChart = echarts.init(document.getElementById('archiveCalendar'));
	let option = {
		title: {
			top: 0,
			text: '博客近一年的文章日历',
			left: 'center',
			textStyle: {
				fontSize: '20',
				color: '#333',
			}
		},
		tooltip: {
			padding: 6,
			formatter: function (obj) {
				var value = obj.value;
				return '<div style="font-size: 12px;">' + value[1] + ' 篇文章：' + value[0] + '</div>';
			}
		},
		visualMap: {
			min: 0,
			max: 3,
			show: false,
			inRange: {
				color: ['#fafafa','#1AAD19']
			}
		},
		calendar: {
			top: 68,
			left: 40,
			right: 15,
			range: getRange(),
			cellSize: ['auto', 22],
			splitLine: {
				lineStyle: {
					color: '#aaa',
					type: 'dashed'
				}
			},
			itemStyle: {
				borderWidth: 0.5
			},
			yearLabel: {show: false},
			monthLabel: {
				nameMap: 'cn',
				fontSize: 12
			},
			dayLabel: {
				show: true,
				formatter: '{start}  1st',
				fontWeight: 'lighter',
				nameMap: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
				fontSize: 12
			}
		},
		series: [{
			type: 'heatmap',
			coordinateSystem: 'calendar',
			calendarIndex: 0,
			data: getDay()
		}]
	};
	myChart.setOption(option);
</script>
{/block}
<!-- /脚本 -->